<template>
  <div class="member">
    <div v-if="som">
      <el-button
            type="warning"
            @click="addInfo">添加</el-button>
            <br>
            <br>
    </div>    
    <el-table v-if="som"
      :data="this.tableData">
      <el-table-column
        align="center"
        header-align="center"
        prop="accountName"
        label="账号"
        >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="openTime"
        label="开通时间"
        >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="endTime"
        label="到期时间"
        >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="openCount"
        label="开通年限"
        >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="子账户"
        >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" class="sub-account">
            <el-card class="box-card" shadow="hover">
              <div v-for="name in scope.row.subAccountName" :key="name.id" class="text item">{{ name }}</div>
            </el-card>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">查看</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="userName"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="address"
        label="地址">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" class="sub-account">
            <el-card class="box-card" shadow="hover">
              {{scope.row.address}}
            </el-card>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="warning">查看</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column 
        label="个人中心">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="showDetail(scope.$index)">查看详情</el-button>
            <el-dialog v-if="scope.row.personInfo"
              :title="'账号:'+scope.row.accountName"
              :visible.sync="dialogVisible[scope.$index]"
              width="30%">
              <el-tabs v-model="activeName">
                <el-tab-pane label="积分" name="first"><el-tag v-if="scope.row.personInfo.score" type="success">{{ scope.row.personInfo.score }}</el-tag></el-tab-pane>
                <el-tab-pane label="余额" ><el-tag v-if="scope.row.personInfo.balance" type="primary">{{ scope.row.personInfo.balance }}</el-tag></el-tab-pane>
                <el-tab-pane v-if="scope.row.personInfo.menu" label="开通套餐" >
                  <span v-for="item in scope.row.personInfo.menu" :key="item.id" >
                    <el-popover placement="bottom-start" trigger="hover" >
                      <el-tag type="danger" slot="reference">{{ item.name }}</el-tag><span slot="reference">&emsp;</span>
                      <span>开通时间: {{ item.beginTime }}</span><br>
                      <span>结束时间: {{ item.endTime }}</span><br>
                      <span>时长: {{ item.long }}</span><br>
                    </el-popover>
                  </span>
                </el-tab-pane>
              </el-tabs>
              <span slot="footer" class="dialog-footer">
                <el-button @click="fadeDetail(scope.$index)">取 消</el-button>
                <el-button type="primary" @click="fadeDetail(scope.$index)">确 定</el-button>
              </span>
            </el-dialog>
        </template>
      </el-table-column>
      <el-table-column 
      align="center"
      label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="editInfo(scope.$index, scope.row)">编辑</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="deleteInfo(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <transition name="el-zoom-in-center">
      <router-view v-show="show" />
    </transition>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
  export default {
    data() {
      return {
        som:true,
        show:true,
        // activeName:'first',
        dialogVisible:false
      }
    },
    computed:{
      ...mapState({
        tableData:state => state.member.member
      }),
      activeName(){
        return 'first'
      }
    },
    methods:{
      ...mapMutations({
        deleteMember:'member/deleteMember'
      }),
      showDetail(index){
        this.dialogVisible = [];
        this.dialogVisible[index] = true
      },
      fadeDetail(index){
        this.dialogVisible = [];
        this.dialogVisible[index] = false;
      },
      editInfo(index,row){
        this.$router.push({path:'/member/edit',query:row});
      },
      addInfo(){
        this.$router.push({path:'/member/add'});
      },
      deleteInfo(index,row){
        this.$confirm(`确定删除用户${ row.accountName }，是否继续？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.$message({
                  type:'success',
                  message:'删除成功'
              });
              this.deleteMember(row);
          }).catch( () => {
              this.$message({
                  type:'info',
                  message:'已取消删除'
              });
          })
      }
    },
    // 路由守卫判断 是否进入详情页,隐藏添加客服按钮
    beforeRouteUpdate(to, from, next){
        if((to.path !== '/member')&&(from.path === '/member')){
            this.som = false;
        }else{
            this.som = true;
        }
        next();
    },
    //不是详情页刷新页面，隐藏添加客服按钮
    mounted(){
        if(this.$route.path !== '/member'){
            this.som = false;
        }
    }
  }
</script>
<style lang="scss" scoped>
  .member{
    width: 100%;
  }
  .sub-account:hover{
    cursor: pointer;
  }
</style>


